<template>
   <main-layout  title="新建采购信息" :showHome="!isShow" :showBack="isShow" >
 <div  class="form-box">
 <van-form @submit="onSubmit">
     <div  class="title">基本信息</div>
  <van-field
    v-model="userName"
      label="创建人"
     />
  <van-field
    v-model="pageData.createTime"
    label="创建时间"
    placeholder="请选择创建时间"
    :rules="[{ required: true, message: '请选择创建时间' }]"
  >
  <template #button>
    <van-button type="warning" @click="show=true" native-type="button">选择时间</van-button>
  </template>
  </van-field>
   <van-field
    v-model="pageData.projectName"
    label="项目名称"
    placeholder="请选择项目名称"
    :rules="[{ required: true, message: '请选择项目名称' }]"
  >
  <template #button>
    <van-button type="warning"   @click="pickPro()" native-type="button">选择项目</van-button>
  </template>
  </van-field>
     <div  class="title">材料信息</div>
   <van-field
    v-model="pageData.materialName"
    label="材料名称"
    placeholder="请选择材料名称"
    :rules="[{ required: true, message: '请选择材料名称' }]"
  >
  <template #button>
    <van-button type="warning" @click="materEvt()" native-type="button">选择材料</van-button>
  </template>
  </van-field>
   <van-field
    v-model.number="pageData.materialWeight"
    label="采购重量"
    placeholder="请采购数量"
    type="number"
    :rules="[{ required: true, message: '请采购重量' }]"
  />
    <van-field
    label="计量单位"
  >
  <template #input>
    <van-dropdown-menu  style=" height:40px;width:200px;" active-color="#1989fa">
    <van-dropdown-item  style=" height:10px;width:200px;" v-model="pageData.materialUnit" :options="option1" />
 </van-dropdown-menu>
  </template>
 
  </van-field>
     <van-field
    v-model="pageData.materialId"
    label="采购单价"
    placeholder="请输入采购单价"
    :rules="[{ required: true, message: '请输入采购单价' }]"
  />
   <div  class="title">供应商信息</div>
   <van-field
    v-model="pageData.materialId"
    label="名称"
    placeholder="请选择供应商"
    :rules="[{ required: true, message: '请选择供应商' }]"
  >
  <template #button>
    <van-button type="warning" @click="show=true" native-type="button">选择供应商</van-button>
  </template>
  </van-field>
  <van-field
    v-model="pageData.supplierContact"
    label="联系人"
    placeholder="请输入联系人"
    :rules="[{ required: true, message: '请输入联系' }]"
  />
  <van-field
    v-model="pageData.supplierPhone"
    label="联系人电话"
    placeholder="请输入联系人电话"
    :rules="[{ required: true, message: '请输入联系人电话' }]"
  />
   <div  class="title">审批信息</div>
   <van-field
    v-model="Man"
    label="审批人"
    placeholder="请选择审批人"
    :rules="[{ required: true, message: '请选择审批人' }]"
  >
  <template #button>
    <van-button type="warning" @click="show=true" native-type="button">选择审批人</van-button>
  </template>
  </van-field>
  <van-field
    v-model="pageData.remark"
    label="备注"
    placeholder="请输入备注"
    :rules="[{ required: true, message: '请输入备注' }]"
  />
  <div style="margin: 16px; height:30px">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
</van-form>
<!-- 时间弹出层 -->
<van-popup
  v-model="show"
  :close-on-click-overlay="false"
  position="bottom"
  :style="{ height: '60%' }"
>
<van-datetime-picker
      v-model="signtime"
       type="datetime"
        @cancel="show=false"
        @confirm="pickTime"
       title="选择年月日"
/>
</van-popup>
<!-- 项目弹出层 -->
<van-popup
  v-model="proShow"
  position="right"
  :style="{ width: '80%',height:'100%' }"
>
<div class="pro-box">
    <header>
        <input type="text" placeholder="输入材料名字">
        <button  @click="pickPro(true)">查询</button>
    </header>
    <ul @scroll="scrollEvt" class="ul-box">
        <li  v-for="it in proList" :key="it.id"  @click="choosePro(it)">{{it.name}}</li>
    <section class="more">{{ loading? '正在加载中' :hasMore? '滑动加载更多':'没有更多了'}} </section>
    </ul>
</div>
</van-popup>
<!-- 选择材料 -->
<van-popup
  v-model="materShow"
  position="right"
  :style="{ width: '80%',height:'100%' }"
>
<div class="pro-box">
    <header>
        <input type="text" placeholder="输入项目名字">
        <button  @click="materEvt(true)">查询</button>
    </header>
    <ul @scroll="scrollEvt" class="ul-box">
        <li  v-for="it in materList" :key="it.id"  @click="choosePro(it)">{{it.name}}</li>
    <section class="more">{{ loading? '正在加载中' :hasMore? '滑动加载更多':'没有更多了'}} </section>
    </ul>
</div>
</van-popup>
       </div>
   </main-layout>
</template>
<script>
import { dateFormate } from '../../util'
import {proDataApi,materDataApi} from '../../apis/purch.js'
export default {
    data(){
        return{
            isShow:false,
             pageData: {      
                 nextId:'',
                 createId:'', 
            //  新建姓名
             createName:'',
             projectId:'',
            //  项目名称
             projectName:'',
             materialId:'',
            //  材料名称
             materialName:'',
            //  材料单位
             materialUnit:'',
            //  材料重量
             materialWeight:'',
            //  采购单价
             price:'',
            //  供应商ID
             supplierId:'',
            //  供应商商名字
             supplierName:'',
            //  联系电话
             supplierPhone:'',
            //  联系人
             supplierContact:'',
            //  创建时间
             createTime:'',
             remark:'',
                },
                // 请求项目数据
                proObj:{
                name:'',
                page:1,
                size:19,
                },
                proList:[],
                materList:[],
                userName:'',
                // signTime:'',
                signtime:new Date(),
                Man:'',
                  show:false,
                  proShow:false,
                  materShow:false,
                  timeShow:'',
                  loading:false,
                  hasMore:false,
                  value1:0,
                  option1:[
        { text: '方', value: 0 },
        { text: '千克', value: 1 },
        { text: '米', value: 2 },
      ],
        }
    },
    created(){
     this.isShow=!!this.$route.query.from
     this.getData()
    },
    computed:{
     userInfo(){
         return this.$store.getters['common/userInfo']
     }
    },
    methods:{
        // 获取操作人名字
     getData(){
        this.userName=this.userInfo.name
     },
    //  项目列表数据
    async getProData(){
      let result=await proDataApi(this.proObj)
      console.log('result',result)
      if(result.code===200){
          this.proList=this.proList.concat(result.data.rows)
          this.hasMore=this.proObj.page*this.proObj.size<result.data.total
          console.log('this.hasMore',this.hasMore)
      }
      setTimeout(() => {
          this.loading=false
      });
    },
    // 材料列表
      async getmaterData(){
      let result=await materDataApi()
      console.log('result',result)
      if(result.code===200){
          this.materList=this.materList.concat(result.data.rows)
          this.hasMore=this.proObj.page*this.proObj.size<result.data.total
          console.log('this.hasMore',this.hasMore)
      }
      setTimeout(() => {
          this.loading=false
      });
    },
    // 滚动事件
    scrollEvt(evt){
     let isBottom=evt.target.offsetHeight+evt.target.scrollTop+20>evt.target.scrollHeight
         if(!this.loading && this.hasMore && isBottom){
         this.loading=true
         this.proObj.page+=1
         this.getProData()
         this.getmaterData()
     }
    },
    // 时间
      pickTime(val){
          console.log("val",val)
      this.pageData.createTime=dateFormate(val,'Y-M-d h:m:s')
      this.show=false
      },
    //  点击选择项目按钮
      pickPro(isQ){
              if(!isQ){
              this.proShow=true
          }
        this.getProData()
      },
    //   点击材料按钮
    materEvt(isQ){
        if(!isQ){
            this.materShow=true
        }
         this.getmaterData()
    },
    // 选中具体项目
    choosePro(val){
        if(val.address){
               this.pageData.projectName=val.name
   this.proShow=false
        }else{
             this.pageData.materialName=val.name
             this.materShow=false
        }


  
    } ,
   onSubmit(){

   }
    }
}
</script>
<style lang="less" scoped>
@import "../../style/common.less";
div{
    padding: 5px 5px; 
}
.pro-box {
  display: block;
  height: 100%;
  > header {
    display: flex;
    padding: 8px 16px;
    border-bottom: 1px solid @cdd;
    input {
      flex: 1;
      padding: 0;
      line-height: 32px;
      font-size: 0.7rem;
      border: none;
      outline: none;
      color: @c99;
    }
    button {
      flex: 0 0 68px;
      height: 32px;
      color: @c99;
      border: none;
      font-size: 0.7rem;
      background-color: @primary;
    }
  }
  > ul {
    display: block;
    padding: 8px 16px;
    height: calc(100% - 32px);
    overflow-x: hidden;
    li {
      border-bottom: 1px solid #ddd;
      font-size: 0.7rem;
      padding: 10px;
      height: 30px;
      &:last-child {
        border-bottom: none;
      }
      &.more {
        text-align: center;
        color: @abc;
        font-size: .6rem;
      }
    }

  }

  }
  
</style>